<template>
    <div class='welcome'>
    <router-view></router-view>
    <div class="up">
        <div class="text">
            <h2>欢迎来到<span>宜家</span></h2>
            <h2>很高兴您来到这里</h2>
            <p>如您在宜家官网注册并登录过，可直接用该宜家官网账号进行登录。</p>
        </div>
        <div class="button" >
            <van-button round type="info" to="/mine/login">登录/注册</van-button>
        </div>
    </div>
    <div class="down">
        <ul>
            <li><div>在线客服</div><span>
                <svg data-v-07814981="" data-v-aab335b6="" fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="iconLeft svg-icon">
                <path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M15.5996 11.9999L9.81456 17.7857L8.40026 16.3716L12.7714 11.9999L8.40026 7.62823L9.81457 6.21411L15.5996 11.9999Z" fill="currentColor"></path>
                </svg></span></li>
            <li><div>关于</div><span><svg data-v-07814981="" data-v-aab335b6="" fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="iconLeft svg-icon">
                <path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M15.5996 11.9999L9.81456 17.7857L8.40026 16.3716L12.7714 11.9999L8.40026 7.62823L9.81457 6.21411L15.5996 11.9999Z" fill="currentColor"></path>
                </svg></span></li>
            <li><div>语言</div><span><svg data-v-07814981="" data-v-aab335b6="" fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="iconLeft svg-icon">
                <path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M15.5996 11.9999L9.81456 17.7857L8.40026 16.3716L12.7714 11.9999L8.40026 7.62823L9.81457 6.21411L15.5996 11.9999Z" fill="currentColor"></path>
                </svg></span></li>
        </ul>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Button } from 'vant';

Vue.use(Button);

  export default {
    components: {},
    data() {
      return {
      
      };
    },
    //计算属性 依赖缓存,多对一(即多个影响一个),不支持异步
    computed: {},
    //监控data中的数据变化,不依赖缓存,一对多,支持异步
    watch: {},
    //方法集合
    methods: {
        
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
    
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style lang='stylus' scoped>
.up 
    background: #0058a3;
    padding: .82rem .2rem .3rem;
    .text
        h2 
            line-height: .32rem;
            font-size: .24rem;
            color: #fff;
            font-weight: 700;
            span 
                color:#ffd800;
                margin-left 0.075rem
        p 
            color: #fff;
            display: flex;
            width: 100%;
            line-height: .21rem;
            font-size: .14rem;
            margin-top: .3rem;
    .button
        margin-top  .26rem;
.down
    li
        width: 100%;
        height: .9rem;
        line-height: .9rem;
        font-size: .14rem;
        padding-left: .28rem;
        padding-right: .28rem;
        border-bottom: 1px solid #f2f2f2;
        display flex
        justify-content space-between
        div
            flex 1
            padding-right: .2rem;
        span
            line-height: .9rem;
            font-size: .14rem;
            svg
                vertical-align: middle;  
</style>
<style lang="css" scoped>
.button .van-button{
    height: .5rem;
    width: 1.64rem;
    font-size: .14rem;
    font-weight: 700;
    text-align: center;
    line-height: 0.5rem;
    background: #fff !important;
    border: 0;
}
.button .van-button__text{
    color:#0f0f0f !important;
    font-weight: 600;
}
/* .content .van-checkbox
    m */
    
    
</style>
